import React,{useState,useEffect,useMemo,useCallback,useRef,createRef,forwardRef,useImperativeHandle} from 'react'


function UseImperativeHandle(props,ref){
    // 使用forwardRef包裹后，函数组件的第二参数为ref
    console.log('start')
    const [qty,setQty] = useState(1)
    const [page,setPage] = useState(1)

    // 定义给ref对象暴露属性
    useImperativeHandle(ref,()=>{
        return {
            a:10,
            changeQty
        }
    })
    
    const changeQty = useCallback(function(){
        setQty(qty+1)
    },[qty])
    const changePage = useCallback(()=>{
        setPage(page+1)
    },[page])

    console.log('end')
    return (
        <div>
            <h4>useImperativeHandle</h4>
            <button onClick={changeQty}>qty: {qty}</button>
            <button onClick={changePage}>page: {page}</button>
        </div>
    )
}

UseImperativeHandle = forwardRef(UseImperativeHandle)
// class UseImperativeHandle extends React.Component{
//     state = {
//         qty:10
//     }
//     getData = ()=>{

//     }
//     render(){
//         return (
//             <div>子组件为类组件</div>
//         )
//     }
// }

export default UseImperativeHandle;